<template>
  <div class="img-order page">
    <div class="camera-b">
      <div class="cam-img" v-if="order.img" :class="{loading:isBlob(order.img)}">
        <img class="img" @click="showImagePreview()"  :src="imgUrl(order.img)" alt="">
        <cube-loading  :size="16" class="loading" ></cube-loading>
        <span @click="del" class="iconfont iconcha"></span>
      </div>
      <div class="cam" @click="click" v-if="!order.img">
        <span class="iconfont iconcamera_full"></span>
      </div>
    </div>
    <select-num v-if="order.typeId==2" style="width: 100%;margin-top: 40px"  :alias="alias" :options="goodsList" class="plane" :items="items" label="产品"  icon="iconwuliaoguanli"></select-num>

<!--    <text-input v-if="!bind"  v-model="order.mobile" class="mobile" desc="填写会员手机号,方便抽奖后联系!"  label="手机号"></text-input>-->

    <div class="btn" @click="commit" v-if="!order.id" style="margin-top: 20px">
        提交
    </div>

    <div class="remark" v-if="bind">
      {{order.remark}}
    </div>

    <div class="btn" @click="bindCommit" v-if="bind">
      确认无误,参与抽奖
    </div>

    <div class="toSelf" v-if="!bind" style="margin-top: 20px;font-size: 20px;color: red" @click="toSelf" >历史记录</div>
    <input @change="selectFile" style="display: none" ref="camera" type="file" id='image' accept="image/*" capture='camera'>
  </div>
</template>

<script>
// import textInput from '../../components/form/text-input'
import { QI_NIU_URL } from '../../app.config'
import { uploadImg } from '../../util/qiniu'
import { save, info, type, goods, bind } from '../../api/order'
import { showConfirm, showAlert } from '../../dialog'
import selectNum from '@/components/form/select-num'
export default {
  created () {
    // this.order.shopId = getPid()
    this.order.id = this.$route.query.id
    this.bind = this.$route.query.bind
    this.order.typeId = this.$route.query.pointType
    goods().then(res => {
      this.goodsList = res.data
      this.priceMap = res.extra.map
    })
    if (this.order.id) {
      info(this.order.id).then(res => {
        this.order = res.data
        this.items = this.order.items.map(item => {
          return { text: item.goodsName, number: item.quantity }
        })
        console.log(this.items)
      })
    }
  },
  data () {
    return {
      items: [{}],
      goodsList: [],
      alias: {
        value: 'id',
        text: 'name'
      },
      bind: false,
      order: {
        point: 0,
        money: 0,
        priceMap: null,
        pointType: null,
        id: null,
        img: null,
        remark: '',
        mobile: null,
        shopId: null
      }
    }
  },
  components: {
    selectNum
  },
  methods: {
    bindCommit () {
      bind(this.order.id, this.order.mobile).then(res => {
        this.order = res.data
        showAlert('参与成功,关注等待结果!')
        this.$router.push('/code')
      })
    },
    toSelf () {
      this.$router.push({
        path: '/order/img/list',
        query: {
          self: 1
        }
      })
    },
    sum () {
      this.items.forEach(item => {
        if (!item.number) return
        const goods = this.priceMap[item.value]
        if (goods.point) {
          this.order.point += goods.point * item.number
        }
        if (goods.money) {
          this.order.money += goods.money * item.number
        }
        this.order.remark += goods.name + 'X' + item.number + '\r\n'
      })
    },
    commit () {
      if (!this.order.img) {
        showAlert('请拍照!')
        return
      }
      if (!this.order.typeId) { // 非晒单
        type().then(res => {
          this.$createActionSheet({
            title: '选择类型',
            data: res.data,
            onSelect: (item, index) => {
              this.order.typeId = item.id
              this.sum()
              this.save()
            }
          }).show()
        })
      } else { // 晒单
        this.sum()
        this.save()
      }
    },
    save () {
      const numbers = this.items.map(item => item.number)
      const ids = this.items.map(item => item.value)
      save(this.order, numbers, ids).then(res => {
        this.order = res.data
        showConfirm('提交成功', '让会员扫码确认').then(res => {
          this.$router.push({
            path: '/share',
            query: {
              orderId: this.order.id
            }
          })
        })
      })
    },
    showImagePreview () {
      this.$createImagePreview({
        imgs: [this.imgUrl(this.order.img)],
        initialIndex: 0
      }).show()
    },
    imgUrl (img) {
      if (this.isBlob(img)) { // base64文件直接返回
        return img
      }
      // 图片名要加前缀
      return QI_NIU_URL + img
    },
    click () {
      this.$refs.camera.click()
    },
    isBlob (img) {
      if (img && img.indexOf('blob') > -1) {
        return true
      }
      return false
    },
    del () {
      this.order.img = null
    },
    selectFile (e) {
      const file = e.target.files[0]
      const url = URL.createObjectURL(file)
      this.order.img = url
      uploadImg(file, {
        next: res => {

        },
        complete: res => {
          this.order.img = res.key
        },
        error: res => {
          this.order.img = null
        }
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .img-order
    display flex
    align-items center
    justify-content center
    background-color #F5F4F7
    flex-direction column
    .remark
      font-size 12px
      color burlywood
      margin-bottom 20px
    .camera-b
      background url("./cbg.png")  no-repeat
      background-size 100% 100%
      width 200px
      height 200px
      display: flex;
      align-items center
      justify-content center
      .cam-img
        position relative
        height 200px
        .iconcha
          z-index 1
          padding 4px 4px
          position absolute
          top -5px
          right -5px
          color white
          background-color darkseagreen
          border-radius 50%
          overflow hidden
          dpr-font(6px)
        .loading
          display none
          z-index 1
          position absolute
          top 50%
          left 50%
          transform translateY(-50%) translateX(-50%)
          color black
        .img
          width auto
          height 100%
        &.loading
          .loading
            display block
          .img
            opacity .4
      .cam
        width 100px
        height 100px
        border-radius 50%
        display flex
        align-items center
        justify-content center
        background-color #E6E5E6
        .iconfont
          color #C3C2C0
          dpr-font(48Px)
    .mobile
      width: 100%;
      margin-top: 80px
      margin-bottom 50px
    .btn
      width 100%
      height 44px
      display flex
      align-items center
      justify-content center
      dpr-font(15Px)
      color white
      background-color #009C4E
      border-radius 20px
      box-shadow:0px 3px 7px 0px rgba(89,88,87,0.52);
</style>
